<template>
    <div class="home">
        <!-- 英雄区域 -->
        <section class="hero">
            <div class="hero-content">
                <h1>探索世界的美丽</h1>
                <p>发现最适合您的旅行目的地</p>
                <SearchBar />
            </div>
        </section>

        <!-- 热门目的地 -->
        <section class="section popular-destinations">
            <div class="container">
                <h2 class="section-title">热门目的地</h2>
                <div class="destinations-grid">
                    <DestinationCard v-for="destination in popularDestinations" :key="destination.id"
                        :destination="destination" />
                </div>
            </div>
        </section>

        <!-- 特色旅游 -->
        <section class="section featured-tours">
            <div class="container">
                <h2 class="section-title">特色旅游</h2>
                <div class="tours-grid">
                    <!-- 这里可以添加特色旅游卡片 -->
                </div>
            </div>
        </section>

        <!-- 用户评价 -->
        <section class="section testimonials">
            <div class="container">
                <h2 class="section-title">旅行者评价</h2>
                <div class="testimonials-grid">
                    <Testimonial v-for="testimonial in testimonials" :key="testimonial.id" :testimonial="testimonial" />
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    import SearchBar from '@/components/SearchBar.vue'
    import DestinationCard from '@/components/DestinationCard.vue'
    import Testimonial from '@/components/Testimonial.vue'

    export default {
        name: 'Home',
        components: {
            SearchBar,
            DestinationCard,
            Testimonial
        },
        data() {
            return {
                popularDestinations: [
                    {
                        id: 1,
                        name: '巴黎',
                        image: require('@/assets/paris.jpg'),
                        description: '浪漫之都，艺术与美食的天堂',
                        price: '¥5,999起'
                    },
                    {
                        id: 2,
                        name: '东京',
                        image: require('@/assets/tokyo.jpg'),
                        description: '传统与现代的完美融合',
                        price: '¥4,599起'
                    },
                    {
                        id: 3,
                        name: '马尔代夫',
                        image: require('@/assets/maldives.jpg'),
                        description: '天堂般的海岛度假胜地',
                        price: '¥8,999起'
                    }
                ],
                testimonials: [
                    {
                        id: 1,
                        name: '张先生',
                        avatar: require('@/assets/avatar1.jpg'),
                        comment: '通过TravelEase预订的巴黎之旅非常完美，服务周到，行程安排合理。',
                        rating: 5
                    },
                    {
                        id: 2,
                        name: '李女士',
                        avatar: require('@/assets/avatar2.jpg'),
                        comment: '马尔代夫的度假村超出预期，海水清澈见底，服务一流。',
                        rating: 5
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .hero {
        height: 80vh;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url('@/assets/hero-bg.jpg') no-repeat center center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
    }

    .hero-content h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .hero-content p {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .section {
        padding: 4rem 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 3rem;
        font-size: 2rem;
        color: #2d3436;
    }

    .destinations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
    }

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
    }
</style>